<template>
  <h2>业务1：鼠标坐标</h2>
  <h3>x:{{ x }}</h3>
  <h3>y:{{ y }}</h3>
  <hr />
  <h2>业务2：点击累加</h2>
  <h3>{{ number }}</h3>
  <button @click="btn()">点击累加</button>
</template>

<script>
import { onUnmounted, reactive, ref, toRefs } from 'vue'

// 业务1：鼠标坐标
const useMouse = () => {
  // 定义响应式对象
  const mouse = reactive({ x: 0, y: 0 })
  const fn = event => {
    // console.log(event)
    // 获取鼠标坐标值
    const { pageX, pageY } = event
    // 赋值给响应式对象
    mouse.x = pageX
    mouse.y = pageY
  }
  // 给文档绑定鼠标移动事件
  document.addEventListener('mousemove', fn)

  // 🔔卸载组件同时卸载一些全局注册的事件
  onUnmounted(() => {
    document.removeEventListener('mousemove', fn)
  })

  // 🔔返回响应式对象用于页面绑定，toRefs配合展开运算符，好用~
  return { ...toRefs(mouse) }
}

// 业务2：点击累加- 上午的业务直接复制过来使用即可
const useCount = () => {
  // 通常是用来定义普通类型数据，字符串，数字，布尔，null，undefined
  const number = ref(10000)
  // console.log(number) // Ref 响应式对象
  // console.log(number.value) // 需要通过 .value 获取真正的值
  const btn = (val = 1000) => {
    number.value += val
  }
  return { btn, number }
}

export default {
  setup() {
    // // 业务1：鼠标坐标封装
    // const { mouse } = useMouse()
    // // 业务2：点击累加
    // const { number, btn } = useCount()
    // // 返回给模板使用
    // return { mouse, number, btn }

    // 一步到位书写
    return { ...useMouse(), ...useCount() }
  },
}
</script>

<style></style>
